<template>
  <div v-show="data.type === 'widget_pic' ? show : true">
    <branch-wrapper-pc v-if="data['border_type'] === 'branch'" :cfg="data">
      <ChildNode :id="eleId" :cfg="data" :load="onLoad" @click.capture="handClick" />
    </branch-wrapper-pc>
    <special-card v-else-if="data['border_type'] === 'stack'" :open="true" :over-animation="false" :height="size.height"
      :width="size.width" :style="data.style" :class="{ 'cursor-pointer': data.event_click }">
      <ChildNode :id="eleId" :cfg="data" :load="onLoad" @click.capture="handClick" />
    </special-card>
    <div v-else-if="data['border_type'] === 'fillet'"
      class="absolute z-100 max-w-screen max-h-screen rounded-[24px] transform-gpu" :style="data.style">
      <ChildNode :id="eleId" :cfg="data" :load="onLoad" @click.capture="handClick" />
    </div>
    <div v-else-if="data['border_type'] === 'pure'"
      class="absolute text-white z-100 text-14px max-w-screen max-h-screen bg-[rgba(255,255,255,0.25)]  backdrop-filter backdrop-blur-[6px] transform-gpu"
      :class="{ [data.type]: true, 'cursor-pointer': data.event_click, 'pc-pure': equ === 'pc', 'video-container': data?.type === 'widget_singlevideo' }"
      :style="{ ...data.style, padding: data['border_width'] || '4vw', borderRadius: data.round || '12px', border: data['border'] ? '1px solid rgba(255, 255, 255, 0.8)' : 'none' }">
      <ChildNode :id="eleId" :cfg="data" :load="onLoad" @click.capture="handClick" />
    </div>
    <div v-else-if="data['border_type'] === 'blur'"
      class="absolute text-white z-100 text-14px max-w-screen max-h-screen  backdrop-filter backdrop-blur-[10px] transform-gpu"
      :class="{ [data.type]: true, 'cursor-pointer': data.event_click, 'pc-pure': equ === 'pc', 'video-container': data?.type === 'widget_singlevideo' }"
      :style="{ ...data.style, padding: data['border_width'] || '0', borderRadius: data.round || '24px' }">
      <ChildNode :id="eleId" :cfg="data" :load="onLoad" @click.capture="handClick" />
    </div>
    <div v-else class="absolute text-white z-100 text-14px max-w-screen max-h-screen"
      :class="{ [data.type]: true, 'cursor-pointer': data.event_click }" :style="data.style" @click="handClick">
      <ChildNode :id="eleId" :cfg="data" :load="onLoad" />
      <BorderFlow v-if="data['border_type'] === 'flow'" />
      <BorderCustom v-else-if="data['border_type'] === 'custom'" :url="data['border_url']"
        :width="data['border_width']" />
    </div>
  </div>
</template>
<script
  lang="ts"
  setup
  name="UiCard"
>
import ChildNode from './hook'
import { useUIStore } from '@/store/ui'
import { equ } from '../../../../package-env'
import { uuid } from '@/utils/random'

// eslint-disable-next-line vue/require-prop-types
const props = defineProps(['data'])
const uiStore = useUIStore()
const show = ref(false)
const eleId = uuid()

const size = computed(() => {
  const width = Number(Number(props.data.style.width.replace('px', '')).toFixed(2));
  const clientWidth = document.body.clientWidth || document.documentElement.clientWidth;
  // 非PC端卡片尺寸根据屏幕调整比例
  const ratio = equ !== 'pc' ? clientWidth * 0.7 / width : 1;
  return ({
    height: Number(Number(props.data.style.height.replace('px', '')).toFixed(2)) * ratio,
    width
  })
})

const onLoad = () => {
  show.value = true
}

const setEnlarge = (x) => {
  const style = uiStore.setStyle(x)
  if (!x.isEnlarge) {
    return style
  }
  const { width, height } = style
  const h = Number(height.replace('px', '')) / (Number(width.replace('px', '')) / (document.body.clientHeight * 0.96))
  return {
    ...x.style,
    width: '96vw',
    height: h + 'px',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    margin: 'auto',
    zIndex: 10000,
  }
}

const handClick = () => {
  const item = props.data
  if (item.event_click) {
    item.handEvent()
    return
  }
  if (item['imgdetail_ability'] === 'true' && item['border_type'] !== 'stack') {
    item.isEnlarge = !item.isEnlarge
    item.style = setEnlarge(item)
  }
}

onMounted(async () => {
  await nextTick()
  const { type, volume } = props.data
  if (type === 'widget_singlevideo' && volume) {
    const videoElement: LooseObject = document.getElementById(`${eleId}`)
    if (videoElement) {
      videoElement.volume = (Number(volume) / 100)
    }
  }
})

</script>
<style
  lang="scss"
  scoped
>
.pc-pure {
  /* background: linear-gradient(135deg, rgba(215, 228, 255, 0.5) 0%, rgba(215, 228, 255, 0.2) 100%); */
  border-radius: 24px;
  /* border: 1px solid #D7E1EF; */
  /* box-shadow: 0px 2px 20px 0px rgba(11, 33, 73, 0.13); */
}

.video-container {
  border: 1px solid #FFFFFF;
  filter: drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.15));
}

.pure {
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* video {
    border-radius: 22px !important;
  } */
}
</style>
